<template>
  <div id="zjll">
    <h3>最近浏览</h3>
    <ul class="goods">
      <li v-for="(item, index) in goods" :key="index">
        <i class="qx"></i>
        <img :src="item.src" alt="" />
        <h6>{{ item.name }}</h6>
        <p>{{ item.detail }}</p>
        <div class="price">
          <b>{{ item.xj | addw }}</b
          ><span>{{ item.yj | addw }}</span>
          <i></i>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'zjll',
  filters: {
    addw(val) {
      return '¥' + val;
    },
  },
  computed: {
    ...mapState(['goods']),
  },
};
</script>

<style scoped>
#zjll {
  width: 100%;
}
#zjll h3 {
  font-size: 18px;
  color: #333;
  font-weight: normal;
}
.goods {
  width: 1000px;
  height: 670px;
  display: flex;
  flex-wrap: wrap;
}
.goods li {
  width: 33.3%;
  position: relative;
}
.goods img {
  height: 200px;
}
.goods h6 {
  font-size: 18px;
  color: #333;
  text-align: left;
}
.goods p {
  font-size: 14px;
  color: #666;
  text-align: left;
  margin: 14px 0;
}
.goods .price {
  text-align: left;
}
.price b {
  color: #ff5757;
  font-size: 24px;
  padding-right: 18px;
}
.price span {
  color: #666;
  font-size: 18px;
  text-decoration: line-through;
}
.price i {
  display: inline-block;
  width: 37px;
  height: 37px;
  background: url('./images/pub/gwc.png') no-repeat center;
  margin-left: 120px;
  vertical-align: -5px;
  cursor: pointer;
}
.qx {
  position: absolute;
  width: 30px;
  height: 30px;
  right: 80px;
  top: 20px;
  background: url('./images/pub/qx.png') no-repeat center;
  cursor: pointer;
}
</style>
